<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui分页</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
    <!-- 必须单独引入才能用layer -->
    <link rel="stylesheet" href="../zujian/layer/theme/default/layer.css">


</head>
<body>

<div id="test1"></div>
<script src="../zujian/layui/layui.js"></script>
<!-- 必须单独引入才能用layer -->
<script src="../zujian/layer/layer.js"></script>
<script>
    layui.use('laypage', function(){

        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: 500 //数据总数，从服务端得到
            ,limit:12	//每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
            ,limits:2  //  每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
            ,curr:3// 起始页。一般用于刷新类型的跳页以及HASH跳页。如：
            ,groups:7
            ,prev:'上1页'
            ,next:'下1页'
            // ,first:1//自定义“首页”的内容，同上//默认1
            // ,last:44//自定义“尾页”的内容，同上//默认 	总页数值

            //自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、
            // next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增）
            // 、skip（快捷跳页区域）
            ,layout:['prev', 'page', 'next','count','limit','refresh','skip']
//             自定义主题。支持传入：颜色值，或任意普通字符。如：
// 1. theme: '#c00'
//         2. theme: 'xxx' //将会生成 class="layui-laypage-xxx" 的CSS类，以便自定义主题
            ,theme:'#c00'
           // 开启location.hash，并自定义 hash 值。如果开启，
            // 在触发分页时，会自动对url追加：#!hash值={curr}
            // 利用这个，可以在页面载入时就定位到指定页
            // 默认false
            ,hash:true
            // jump - 切换分页的回调
            // 当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、
            // first（是否首次，一般用于初始加载的判断）
            ,jump:function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                console.log(obj.limit); //得到每页显示的条数
                //首次不执行,因为首次直接加载第一个页面
                if(!first){
                    //do something
                    layer.alert('切换到第'+obj.curr+'页！')
                }
            }
        });
    });
</script>
</body>
</html>